<link rel="stylesheet" href="./van.css">
<div id="root">
  <!-- 导航栏封装 -->  
 <van-nav-bar title='首页'></van-nav-bar>
<!-- 按钮 -->
 <van-button title='提交' colortype='blue'></van-button>
 <van-button title='修改' colortype='red'></van-button>

<!-- loding -->
 <van-loading v-bind:show='true'></van-loading>

<!-- tips -->
<van-tips title="青山绿水" v-bind:show='true'></van-tips>

<!-- 动态表格 -->
<van-table v-bind:columns='columns1' :data='data1' ></van-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./van.js"></script>
<script>
const vm = new Vue({
    el: "#root",
    data: {
        columns1: [
        {title:'编号2', key: 'id'},
        {title:'姓名2', key: 'name'},
        {title:'性别2', key: 'gender'},
        {title:'年龄2', key: 'age'},
        {title:'地址2', key: 'address'},
      ], 
      data1: [
        {id:1, name: '武大郎',gender:'女', age: 18, address: '河南'},
        {id:2, name: '王思聪', gender:'男', age: 8, address: '安徽'},
        {id:3, name: '王可可', gender:'男', age: 28, address: '浙江'},
        {id:4, name: '大圣', gender:'女', age: 17, address: '南京'},
      ]

    }
})
</script>